<template>
  <!-- TODO: 跳转到直播列表页 -->
  <router-link
    v-if="liveInfo.length > 0 && showLiveTip"
    :to="{name: 'liveList'}"
    class="live-tips"
    tag="div"
  >
    <img
      class="live-tip-img"
      src="~assets/class/zhibo_w.gif"
    >
    <div class="live-tip-info">
      <div class="tip-prompt">
        正在直播
      </div>
      <van-swipe
        ref="liveSwipe"
        :show-indicators="false"
        :autoplay="5000"
        vertical
        style="width: 100%; height: 13px;"
      >
        <van-swipe-item
          v-for="item in liveInfo"
          :key="item.SectionId"
          class="live-name"
        >
          {{ item.SectionName }}
        </van-swipe-item>
      </van-swipe>
    </div>
    <img
      class="live-tip-close"
      src="~assets/home/close.png"
      @click.stop="showLiveTip = false"
    >
  </router-link>
</template>
<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'
export default Vue.extend({
  data () {
    return {
      liveInfo: [],
      showLiveTip: true,
    }
  },
  created () {
    this.onGetLiveTipInfo()
  },
  methods: {
    onGetLiveTipInfo () {
      this.$axios({
        method: 'get',
        url: 'Live/LiveIndexForH5',
        data: {
          CategoryId: this.$store.state.category.CategoryId,
        },
      }).then(res => {
        this.liveInfo = res
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.live-tips {
  position: fixed;
  left: 50%;
  bottom: calc(1.33333rem + 20px);
  z-index: 99;
  width: 60%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 38px;
  transform: translate(-50%);
  background-color: $primary-web;
  padding: 0 8px 0 4px;
}

.live-tip-img {
  width: 69px;
  height: 69px;
  border-radius: 69px;
}

.live-tip-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  font-size: 26px;
  color: #fff;
  overflow: hidden;
  padding: 10px 20px 5px;
}

.live-name {
  font-size: 24px;
  @include ellipsis;
}

.live-tip-close {
  width: 58px;
  height: 58px;
}
</style>
